<template>
  <div>
    <!-- <div class="qup-page-heade bread-box">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item class="btn-green" @click.native="goBack">门店返利</el-breadcrumb-item>
        <el-breadcrumb-item>返利申请</el-breadcrumb-item>
      </el-breadcrumb>
      <div>
        <el-button :disabled="saveLoading" :loading="submitLoading" size="mini" type="primary" @click="saveForm('2')">提交</el-button>
        <el-button :disabled="submitLoading" :loading="saveLoading" size="mini" type="primary" @click="saveForm('1')">保存</el-button>
        <el-button size="mini" @click.native="goBack">返回</el-button>
      </div>
    </div> -->
    <div style="display:flex;flex-direction:row-reverse;margin-top:10px">
      <el-button :disabled="saveLoading" :loading="submitLoading" size="mini" type="primary" @click.native="saveForm('2')">提交</el-button>
      <el-button style="margin-right:20px" :disabled="submitLoading" :loading="saveLoading" size="mini" type="primary" @click.native="saveForm('1')">保存</el-button>
    </div>
    <el-form
      ref="refForm"
      style="margin-top:20px"
      :rules="formRules"
      :model="formData"
      size="mini"
      label-width="160px"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="申报类型:" prop="declareType">
            <c-dict-select
              v-model="formData.declareType"
              dict-type-code="DECLARE_TYPE"
              placeholder="请选择申报类型"
            />
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="备注:" prop="remark">
            <el-input v-model="formData.remark" maxlength="1000" show-word-limit type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-show="formData.declareType==='A'">
        <el-col :span="24">
          <el-form-item label="卖场返利核算:" prop="shopAccounting">
            <el-input v-model="formData.shopAccounting" maxlength="1000" show-word-limit type="textarea" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="门头返利核算:" prop="dheadAccounting">
            <el-input v-model="formData.dheadAccounting" maxlength="1000" show-word-limit type="textarea" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否涉及月返:" prop="isMonthReturn">
            <el-select
              v-model="formData.isMonthReturn"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option label="是" :value="1" />
              <el-option label="否" :value="0" />

            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="客户成品:" prop="endProAccountCode">
            <input-with-dialog
              v-model="endProAccount"
              :props="{label:'code',value:'code'}"
              :config="dialogConfigEndPro"
              @change="handleChangeEndPro"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户成品账号名称:" prop="endProAccountName">
            <el-input v-model="formData.endProAccountName" placeholder="请选择客户成品账号" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户定制:" prop="customizedAccountCode">
            <input-with-dialog
              v-model="customizedAccount"
              :props="{label:'code',value:'code'}"
              :config="dialogConfigCustomized"
              @change="handleChangeCustomized"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户定制名称:" prop="customizedAccountName">
            <el-input v-model="formData.customizedAccountName" placeholder="请选择客户定制账号" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="客户经理:" prop="clientManagerCode">
            <input-with-dialog
              v-model="client"
              :props="{label:'name',value:'code'}"
              :config="dialogConfigClient"
              @change="handleChangeClient"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="最早装修进场时间:">
            {{ formData.actualApproachTime }}
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <edit-tab :id="id" v-loading="dataLoading" :const-code="detailData.constCode" :detail-data="detailData" />
  </div>
</template>
<script>
import { otherFiltersItem } from '@/utils'
import { saveRebateState, getDetailById, submitBatch } from '@/api/shopRebate'
import BackPageMixin from '@/mixins/backPage'
import editTab from './editTab.vue'
export default {
  name: 'RebateEdit',
  components: { editTab },
  mixins: [BackPageMixin],
  props: {
    // id: {
    //   type: String,
    //   default: ''
    // }
  },
  data() {
    return {
      id: '',
      dataLoading: false,
      saveLoading: false,
      submitLoading: false,
      detailData: {},
      client: [],
      endProAccount: [],
      customizedAccount: [],
      personalId1: '',
      personalId2: '',
      formData: {
        shopAccounting: '', // 卖场返利核算
        dheadAccounting: '', // 门头返利核算
        remark: '',
        declareType: '',
        isMonthReturn: undefined, // 是否涉及月返
        clientManagerCode: '', // 客户经理
        clientManagerName: '',
        id: '',
        endProAccountCode: '', // 客户成品
        endProAccountName: '',
        customizedAccountCode: '', // 客户定制
        customizedAccountName: '',
        actualApproachTime: ''
      },
      formRules: {
        shopAccounting: [{ required: true, message: '请输入卖场返利核算', trigger: 'change' }],
        dheadAccounting: [{ required: true, message: '请输入门头返利核算', trigger: 'change' }],
        isMonthReturn: [{ required: true, message: '请选择是否涉及月返', trigger: 'change' }],
        endProAccountCode: [{ required: true, message: '请选择客户成品', trigger: 'change' }],
        customizedAccountCode: [{ required: true, message: '请选择客户定制', trigger: 'change' }],
        clientManagerCode: [{ required: true, message: '请选择客户经理', trigger: 'change' }],
        remark: [{ required: false, message: '请填写备注', trigger: 'change' }],
        declareType: [{ required: true, message: '请选择申报类型', trigger: 'change' }]

      },
      dialogConfigClient: {
        title: '客户经理',
        filtersRaw: [],
        pageFlag: false,
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/user/listCustomerManagerByAccounts`,
        setting: [{ prop: 'adAccount', title: 'AD域' }, { prop: 'name', title: '名称' }]
      },
      dialogConfigEndPro: {
        title: '成品账号',
        apiHeader: {
          'permission-code': 'storerebate',
          'Permission-App': 'slm'
        },
        filtersRaw: [{ 'id': 'status', 'property': 'status', 'operator': '=', 'value': '1' }],
        interfacePath: `/select-service/api/v1/account/page`,
        setting: [{ prop: 'code', title: '编码' }, { prop: 'name', title: '名称' }]
      },
      dialogConfigCustomized: {
        title: '定制账号',
        apiHeader: {
          'permission-code': 'storerebate',
          'Permission-App': 'slm'
        },
        filtersRaw: [{ 'id': 'status', 'property': 'status', 'operator': '=', 'value': '1' }],
        interfacePath: `/select-service/api/v1/account/page`,
        setting: [{ prop: 'code', title: '编码' }, { prop: 'name', title: '名称' }]
      }
    }
  },
  computed: {},
  created() {
    this.client = [{ code: this.formData.clientManagerCode, name: this.formData.clientManagerName }]
    this.endProAccount = [{ code: this.formData.endProAccountCode, name: this.formData.endProAccountCode }]
    this.customizedAccount = [{ code: this.formData.customizedAccountCode, name: this.formData.customizedAccountCode }]
    this.id = this.$route.query.id
    if (this.id) {
      this.dataLoading = true
      getDetailById(this.id).then(res => {
        if (res.success === 1) {
          const {
            shopAccounting,
            remark,
            declareType,
            dheadAccounting,
            isMonthReturn,
            clientManagerCode,
            clientManagerName,
            endProAccountCode,
            endProAccountName,
            customizedAccountCode,
            customizedAccountName,
            actualApproachTime
          } = res.data
          this.formData = {
            shopAccounting,
            dheadAccounting,
            remark,
            declareType,
            isMonthReturn,
            clientManagerCode,
            clientManagerName,
            endProAccountCode,
            endProAccountName,
            customizedAccountCode,
            customizedAccountName,
            actualApproachTime
          }
          this.detailData = res.data
          this.dataLoading = false
          this.endProAccount = [{ code: this.formData.endProAccountCode, name: this.formData.endProAccountCode }]
          this.customizedAccount = [{ code: this.formData.customizedAccountCode, name: this.formData.customizedAccountCode }]
          this.client = [{ code: this.formData.clientManagerCode, name: this.formData.clientManagerName }]
          this.personalId1 = endProAccountCode
          this.personalId2 = customizedAccountCode
          this.dialogConfigClient.filtersRaw = [otherFiltersItem('accounts', endProAccountCode + ',' + customizedAccountCode, '='), otherFiltersItem('isSaleOrganization', '1', '=')]
          this.dialogConfigEndPro.filtersRaw.push(otherFiltersItem('customerCode', this.detailData.clientCode || '', '='))
          this.dialogConfigCustomized.filtersRaw.push(otherFiltersItem('customerCode', this.detailData.clientCode || '', '='))
        }
      }).catch(() => {
        this.dataLoading = false
      })
    }
  },
  methods: {
    // 客户经理改变
    handleChangeClient(data) {
      if (data.length !== 0) {
        this.formData.clientManagerName = data[0].name
        this.formData.clientManagerCode = data[0].adAccount
      } else {
        this.formData.clientManagerName = ''
        this.formData.clientManagerCode = ''
      }
    },
    // 客户成品改变
    handleChangeEndPro(data) {
      this.formData.clientManagerName = ''
      this.formData.clientManagerCode = ''
      this.client = [{ code: '', name: '' }]
      if (data.length !== 0) {
        this.formData.endProAccountName = data[0].name
        this.formData.endProAccountCode = data[0].code
        this.personalId1 = data[0].code
        this.formRules.customizedAccountCode[0].required = false
      } else {
        this.formData.endProAccountCode = ''
        this.formData.endProAccountName = ''
        this.personalId1 = ''
        this.formRules.customizedAccountCode[0].required = true
      }
      this.dialogConfigClient.filtersRaw = [otherFiltersItem('accounts', this.personalId1 + ',' + this.personalId2, '='), otherFiltersItem('isSaleOrganization', '1', '=')]
    },
    // 客户定制改变
    handleChangeCustomized(data) {
      this.formData.clientManagerName = ''
      this.formData.clientManagerCode = ''
      this.client = [{ code: '', name: '' }]

      if (data.length !== 0) {
        this.formData.customizedAccountName = data[0].name
        this.formData.customizedAccountCode = data[0].code
        this.personalId2 = data[0].code
        this.formRules.endProAccountCode[0].required = false
      } else {
        this.formData.customizedAccountName = ''
        this.formData.customizedAccountCode = ''
        this.personalId2 = ''
        this.formRules.endProAccountCode[0].required = true
      }
      this.dialogConfigClient.filtersRaw = [otherFiltersItem('accounts', this.personalId1 + ',' + this.personalId2, '='), otherFiltersItem('isSaleOrganization', '1', '=')]
    },
    handleSave(type) {
      if (type === '1') this.saveLoading = true
      if (type === '2') this.submitLoading = true
      this.formData.id = this.id
      let data = {}
      if (this.formData.declareType !== 'A') {
        data = {
          actualApproachTime: this.formData.actualApproachTime,
          clientManagerCode: this.formData.clientManagerCode,
          clientManagerName: this.formData.clientManagerName,
          declareType: this.formData.declareType,
          id: this.formData.id,
          remark: this.formData.remark,
          customizedAccountCode: '',
          customizedAccountName: '',
          dheadAccounting: '',
          endProAccountCode: '',
          endProAccountName: '',
          isMonthReturn: undefined,
          shopAccounting: ''
        }
      }
      saveRebateState(data.id ? data : this.formData).then(res => {
        if (res.success === 1) {
          const resId = res.msg || this.formData.id
          if (type === '1') {
            this.$message({
              message: '保存成功',
              type: 'success'
            })
            this.$store.dispatch('views/goBack')
            this.saveLoading = false
          } else if (type === '2') {
            // 提报
            this.submitLoading = true
            submitBatch([resId]).then(res => {
              if (res.success === 1) {
                this.$message({
                  message: res.msg || '提报成功',
                  type: 'success'
                })
                this.$store.dispatch('views/goBack')
                this.submitLoading = false
              }
            })
          }
        }
      }).catch(() => {
        this.saveLoading = false
        this.submitLoading = false
      })
    },
    async saveForm(type) {
      if (this.formData.declareType === 'A') {
      // const pass = await this.$refs['refForm'].validate()
      // console.log(pass)
      // return
        this.$refs['refForm'].validate((valid) => {
          if (valid) {
            this.handleSave(type)
          }
        })
      } else {
        this.handleSave(type)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-breadcrumb__inner{
    color: $qup-color-primary;
  }
</style>
